<template>
  <div class="flex flex-col items-center justify-center">
    <div ref="animationBox" class="w-full h-full"></div>
    <slot></slot>
  </div>
</template>

<script setup>
import lottie from 'lottie-web';
import {onMounted, ref} from "vue";

const animationBox = ref(null)

onMounted(() => {
  let animation = lottie.loadAnimation({
    container: animationBox.value,
    renderer: 'svg',
    loop: true,
    autoplay: true,
    animationData: {
      "v": "5.6.1",
      "fr": 30,
      "ip": 0,
      "op": 37,
      "w": 100,
      "h": 100,
      "nm": "合成 1",
      "ddd": 0,
      "assets": [],
      "layers": [{
        "ddd": 0,
        "ind": 1,
        "ty": 4,
        "nm": "形状图层 3",
        "sr": 1,
        "ks": {
          "o": {
            "a": 0,
            "k": 100,
            "ix": 11
          },
          "r": {
            "a": 0,
            "k": 0,
            "ix": 10
          },
          "p": {
            "a": 1,
            "k": [{
              "i": {
                "x": 0.667,
                "y": 1
              },
              "o": {
                "x": 0.167,
                "y": 0.167
              },
              "t": 0,
              "s": [21.037, 82.074, 0],
              "to": [9.5, 0, 0],
              "ti": [-9.5, 0, 0]
            }, {
              "i": {
                "x": 0.667,
                "y": 0.667
              },
              "o": {
                "x": 0.167,
                "y": 0.167
              },
              "t": 36,
              "s": [78.037, 82.074, 0],
              "to": [0, 0, 0],
              "ti": [0, 0, 0]
            }, {
              "t": 52,
              "s": [78.037, 82.074, 0]
            }],
            "ix": 2
          },
          "a": {
            "a": 0,
            "k": [-27.463, 17.074, 0],
            "ix": 1
          },
          "s": {
            "a": 0,
            "k": [100, 100, 100],
            "ix": 6
          }
        },
        "ao": 0,
        "shapes": [{
          "ty": "gr",
          "it": [{
            "ty": "rc",
            "d": 1,
            "s": {
              "a": 0,
              "k": [12.074, 12.074],
              "ix": 2
            },
            "p": {
              "a": 0,
              "k": [0, 0],
              "ix": 3
            },
            "r": {
              "a": 0,
              "k": 4,
              "ix": 4
            },
            "nm": "矩形路径 1",
            "mn": "ADBE Vector Shape - Rect",
            "hd": false
          }, {
            "ty": "fl",
            "c": {
              "a": 0,
              "k": [0.974494485294, 0.378802520154, 0.191181826124, 1],
              "ix": 4
            },
            "o": {
              "a": 0,
              "k": 100,
              "ix": 5
            },
            "r": 1,
            "bm": 0,
            "nm": "填充 1",
            "mn": "ADBE Vector Graphic - Fill",
            "hd": false
          }, {
            "ty": "tr",
            "p": {
              "a": 0,
              "k": [-27.463, 11.037],
              "ix": 2
            },
            "a": {
              "a": 0,
              "k": [0, 0],
              "ix": 1
            },
            "s": {
              "a": 0,
              "k": [100, 100],
              "ix": 3
            },
            "r": {
              "a": 0,
              "k": 0,
              "ix": 6
            },
            "o": {
              "a": 0,
              "k": 100,
              "ix": 7
            },
            "sk": {
              "a": 0,
              "k": 0,
              "ix": 4
            },
            "sa": {
              "a": 0,
              "k": 0,
              "ix": 5
            },
            "nm": "变换"
          }],
          "nm": "矩形 1",
          "np": 3,
          "cix": 2,
          "bm": 0,
          "ix": 1,
          "mn": "ADBE Vector Group",
          "hd": false
        }],
        "ip": 0,
        "op": 151,
        "st": 0,
        "bm": 0
      }, {
        "ddd": 0,
        "ind": 2,
        "ty": 4,
        "nm": "形状图层 2",
        "sr": 1,
        "ks": {
          "o": {
            "a": 0,
            "k": 100,
            "ix": 11
          },
          "r": {
            "a": 0,
            "k": 0,
            "ix": 10
          },
          "p": {
            "a": 1,
            "k": [{
              "i": {
                "x": 0.667,
                "y": 1
              },
              "o": {
                "x": 0.167,
                "y": 0.167
              },
              "t": 0,
              "s": [39.87, 82.074, 0],
              "to": [0, 0, 0],
              "ti": [21.27, -57.875, 0]
            }, {
              "t": 10,
              "s": [21, 82.074, 0]
            }],
            "ix": 2
          },
          "a": {
            "a": 0,
            "k": [-27.463, 17.074, 0],
            "ix": 1
          },
          "s": {
            "a": 1,
            "k": [{
              "i": {
                "x": [0.667, 0.667, 0.667],
                "y": [1, 1, 1]
              },
              "o": {
                "x": [0.167, 0.167, 0.167],
                "y": [0, 0.167, 0]
              },
              "t": 0,
              "s": [100, 110, 100]
            }, {
              "i": {
                "x": [0.667, 0.667, 0.667],
                "y": [1, 1, 1]
              },
              "o": {
                "x": [0.167, 0.167, 0.167],
                "y": [0, 0.167, 0]
              },
              "t": 10,
              "s": [100, 80, 100]
            }, {
              "t": 15,
              "s": [100, 100, 100]
            }],
            "ix": 6
          }
        },
        "ao": 0,
        "shapes": [{
          "ty": "gr",
          "it": [{
            "ty": "rc",
            "d": 1,
            "s": {
              "a": 0,
              "k": [12.074, 12.074],
              "ix": 2
            },
            "p": {
              "a": 0,
              "k": [0, 0],
              "ix": 3
            },
            "r": {
              "a": 0,
              "k": 4,
              "ix": 4
            },
            "nm": "矩形路径 1",
            "mn": "ADBE Vector Shape - Rect",
            "hd": false
          }, {
            "ty": "fl",
            "c": {
              "a": 0,
              "k": [0.974494485294, 0.378802520154, 0.191181826124, 1],
              "ix": 4
            },
            "o": {
              "a": 0,
              "k": 100,
              "ix": 5
            },
            "r": 1,
            "bm": 0,
            "nm": "填充 1",
            "mn": "ADBE Vector Graphic - Fill",
            "hd": false
          }, {
            "ty": "tr",
            "p": {
              "a": 0,
              "k": [-27.463, 11.037],
              "ix": 2
            },
            "a": {
              "a": 0,
              "k": [0, 0],
              "ix": 1
            },
            "s": {
              "a": 0,
              "k": [100, 100],
              "ix": 3
            },
            "r": {
              "a": 0,
              "k": 0,
              "ix": 6
            },
            "o": {
              "a": 0,
              "k": 100,
              "ix": 7
            },
            "sk": {
              "a": 0,
              "k": 0,
              "ix": 4
            },
            "sa": {
              "a": 0,
              "k": 0,
              "ix": 5
            },
            "nm": "变换"
          }],
          "nm": "矩形 1",
          "np": 3,
          "cix": 2,
          "bm": 0,
          "ix": 1,
          "mn": "ADBE Vector Group",
          "hd": false
        }],
        "ip": 0,
        "op": 151,
        "st": 0,
        "bm": 0
      }, {
        "ddd": 0,
        "ind": 3,
        "ty": 4,
        "nm": "形状图层 1",
        "sr": 1,
        "ks": {
          "o": {
            "a": 0,
            "k": 100,
            "ix": 11
          },
          "r": {
            "a": 0,
            "k": 0,
            "ix": 10
          },
          "p": {
            "a": 1,
            "k": [{
              "i": {
                "x": 0.667,
                "y": 1
              },
              "o": {
                "x": 0.167,
                "y": 0.167
              },
              "t": 10,
              "s": [58.704, 82.074, 0],
              "to": [-3.134, 0, 0],
              "ti": [18.884, -53.25, 0]
            }, {
              "t": 21,
              "s": [39.9, 82.074, 0]
            }],
            "ix": 2
          },
          "a": {
            "a": 0,
            "k": [-27.463, 17.074, 0],
            "ix": 1
          },
          "s": {
            "a": 1,
            "k": [{
              "i": {
                "x": [0.667, 0.667, 0.667],
                "y": [1, 1, 1]
              },
              "o": {
                "x": [0.167, 0.167, 0.167],
                "y": [0, 0.167, 0]
              },
              "t": 10,
              "s": [100, 110, 100]
            }, {
              "i": {
                "x": [0.667, 0.667, 0.667],
                "y": [1, 1, 1]
              },
              "o": {
                "x": [0.167, 0.167, 0.167],
                "y": [0, 0.167, 0]
              },
              "t": 21,
              "s": [100, 80, 100]
            }, {
              "t": 26,
              "s": [100, 100, 100]
            }],
            "ix": 6
          }
        },
        "ao": 0,
        "shapes": [{
          "ty": "gr",
          "it": [{
            "ty": "rc",
            "d": 1,
            "s": {
              "a": 0,
              "k": [12.074, 12.074],
              "ix": 2
            },
            "p": {
              "a": 0,
              "k": [0, 0],
              "ix": 3
            },
            "r": {
              "a": 0,
              "k": 4,
              "ix": 4
            },
            "nm": "矩形路径 1",
            "mn": "ADBE Vector Shape - Rect",
            "hd": false
          }, {
            "ty": "fl",
            "c": {
              "a": 0,
              "k": [0.974494485294, 0.378802520154, 0.191181826124, 1],
              "ix": 4
            },
            "o": {
              "a": 0,
              "k": 100,
              "ix": 5
            },
            "r": 1,
            "bm": 0,
            "nm": "填充 1",
            "mn": "ADBE Vector Graphic - Fill",
            "hd": false
          }, {
            "ty": "tr",
            "p": {
              "a": 0,
              "k": [-27.463, 11.037],
              "ix": 2
            },
            "a": {
              "a": 0,
              "k": [0, 0],
              "ix": 1
            },
            "s": {
              "a": 0,
              "k": [100, 100],
              "ix": 3
            },
            "r": {
              "a": 0,
              "k": 0,
              "ix": 6
            },
            "o": {
              "a": 0,
              "k": 100,
              "ix": 7
            },
            "sk": {
              "a": 0,
              "k": 0,
              "ix": 4
            },
            "sa": {
              "a": 0,
              "k": 0,
              "ix": 5
            },
            "nm": "变换"
          }],
          "nm": "矩形 1",
          "np": 3,
          "cix": 2,
          "bm": 0,
          "ix": 1,
          "mn": "ADBE Vector Group",
          "hd": false
        }],
        "ip": 0,
        "op": 151,
        "st": 0,
        "bm": 0
      }, {
        "ddd": 0,
        "ind": 4,
        "ty": 4,
        "nm": "形状图层 4",
        "sr": 1,
        "ks": {
          "o": {
            "a": 0,
            "k": 100,
            "ix": 11
          },
          "r": {
            "a": 0,
            "k": 0,
            "ix": 10
          },
          "p": {
            "a": 1,
            "k": [{
              "i": {
                "x": 0.667,
                "y": 1
              },
              "o": {
                "x": 0.167,
                "y": 0.167
              },
              "t": 21,
              "s": [77.537, 82.074, 0],
              "to": [-3.14, 0, 0],
              "ti": [19.64, -49.75, 0]
            }, {
              "t": 32,
              "s": [58.7, 82.074, 0]
            }],
            "ix": 2
          },
          "a": {
            "a": 0,
            "k": [-27.463, 17.074, 0],
            "ix": 1
          },
          "s": {
            "a": 1,
            "k": [{
              "i": {
                "x": [0.667, 0.667, 0.667],
                "y": [1, 1, 1]
              },
              "o": {
                "x": [0.167, 0.167, 0.167],
                "y": [0, 0.167, 0]
              },
              "t": 21,
              "s": [100, 110, 100]
            }, {
              "i": {
                "x": [0.667, 0.667, 0.667],
                "y": [1, 1, 1]
              },
              "o": {
                "x": [0.167, 0.167, 0.167],
                "y": [0, 0.167, 0]
              },
              "t": 32,
              "s": [100, 80, 100]
            }, {
              "t": 37,
              "s": [100, 100, 100]
            }],
            "ix": 6
          }
        },
        "ao": 0,
        "shapes": [{
          "ty": "gr",
          "it": [{
            "ty": "rc",
            "d": 1,
            "s": {
              "a": 0,
              "k": [12.074, 12.074],
              "ix": 2
            },
            "p": {
              "a": 0,
              "k": [0, 0],
              "ix": 3
            },
            "r": {
              "a": 0,
              "k": 4,
              "ix": 4
            },
            "nm": "矩形路径 1",
            "mn": "ADBE Vector Shape - Rect",
            "hd": false
          }, {
            "ty": "fl",
            "c": {
              "a": 0,
              "k": [0.974494485294, 0.378802520154, 0.191181826124, 1],
              "ix": 4
            },
            "o": {
              "a": 0,
              "k": 100,
              "ix": 5
            },
            "r": 1,
            "bm": 0,
            "nm": "填充 1",
            "mn": "ADBE Vector Graphic - Fill",
            "hd": false
          }, {
            "ty": "tr",
            "p": {
              "a": 0,
              "k": [-27.463, 11.037],
              "ix": 2
            },
            "a": {
              "a": 0,
              "k": [0, 0],
              "ix": 1
            },
            "s": {
              "a": 0,
              "k": [100, 100],
              "ix": 3
            },
            "r": {
              "a": 0,
              "k": 0,
              "ix": 6
            },
            "o": {
              "a": 0,
              "k": 100,
              "ix": 7
            },
            "sk": {
              "a": 0,
              "k": 0,
              "ix": 4
            },
            "sa": {
              "a": 0,
              "k": 0,
              "ix": 5
            },
            "nm": "变换"
          }],
          "nm": "矩形 1",
          "np": 3,
          "cix": 2,
          "bm": 0,
          "ix": 1,
          "mn": "ADBE Vector Group",
          "hd": false
        }],
        "ip": 0,
        "op": 151,
        "st": 0,
        "bm": 0
      }],
      "markers": []
    },
  });
})
</script>

<style scoped>

</style>